/* 放置各个页面都会用到的公共样式 */

*{
    /* 先去掉页面的默认样式 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 给整个页面加上背景图片 调整html的宽度和浏览器窗口大小一致,body和html一样 */
html, body{
    height: 100%;
    
}
body{
    /* 背景图片 此时css和图片的目录是同级的需要先找到css的父目录然后才能找到图片 */
    background-image: url("../picture/m.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.nav{
    width: 100%;
    /* 这里的尺寸没有规范自己觉得好就行 */
    height: 50px;

    background-color: rgba(51, 51, 51, 0.4);
    color: white;

    /* 针对一排布局的就需要使用弹性布局 */
    display: flex;
    /* 子元素垂直居中 */
    align-items: center;
}
.nav img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* 这里加内边距和外边距都可以 */
    margin-left: 30px;
    margin-right: 10px;
}

.nav .spacer{
    width: 70%;
}
.nav a{
    color: white;
    /* 去掉下划线 */
    text-decoration: none;
    /* 中间间距 */
    padding: 0 10px ;
}



/* 版心相关的样式 */
.container{
    /* 当前版心并不和浏览器窗口大小一样 */
    width: 1000px;
    /* 这里的高度就不能是100%了因为还有一个导航栏的宽度,得减去这个宽度 
    calc是CSS3里面的一个内置函数(减号左右两侧必须有空格)*/
    height: calc(100% - 50px);

    /* 水平居中 */
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
}

.container .left{
    width: 200px;
    height: 100%;
    /* background-color:rgba(255, 255, 255, 0.7); */

}

.container .right{
    width: 795px;
    height: 100%;
    background-color:rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    /* 如果内容过多的话,可能会导致页面样式出现问题,因此需要固定背景在右侧区域,将滚动条放到右侧 */
    /* 溢出就会自动加滚动条 */
    overflow: auto;
}

/* 用户样式 */
.card{
    width: 200px;
    /* height: 60%; 高度不设置就是和内容高度总和起来的一样的*/
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;

    /* 通过内边距就可以让元素居中 */
    padding: 30px;
}
.card img{
    width: 140px;
    height: 140px;
    border-radius: 50%;
}
.card h3{
    /* 文本居中 */
    text-align: center;
    padding: 10px;
}

.card a{
    /* a标签默认为行内元素,而行内元素的很多边距不起作用,因此将他设置为块级元素 */
    display: block;
    text-align: center;
    text-decoration: none;
    color: #999;
    padding: 10px;
}
.card .counter{
    display: flex;
    justify-content: space-around;
    padding: 5px;
}
